 <template>
 	<view>
 		<view class="detail" v-if="!loading">
 			<view class="detail-top">
 				<view class="cicle">
 					<view class="cicle-item">
 						<view v-if="orderInfo.status==1">已租借</view>
 						<view class="item-time" v-if="orderInfo.status==1">
 							{{ysyTime.hours>9?ysyTime.hours:'0'+ysyTime.hours}}:{{ysyTime.minutes>9?ysyTime.minutes:'0'+ysyTime.minutes}}:{{ysyTime.seconds>9?ysyTime.seconds:'0'+ysyTime.seconds}}
 						</view>
 						<!-- <view v-if="orderInfo.status==2" style="font-size: 100rpx;font-weight: bold;color: #00bbfe;">√
 						</view> -->
 						<image v-if="orderInfo.status==2" src="/static/dh.png" style="width: 140rpx;height: 140rpx;">
 						</image>
 					</view>
 				</view>
 				<view class="top-text" v-if="orderInfo.status==1">设备使用中</view>
 			</view>
 			<view class="detail-con">
 				<view>使用详情</view>
 				<view class="con-text" style="margin-top: 31rpx;">空压机类型</view>
 				<view style="margin-top: 10rpx;">郑州航海东路喷油螺杆压缩机</view>
 				<view class="con-flex">
 					<view style="flex: 1;">
 						<view class="con-text">货物载重</view>
 						<view style="margin-top: 10rpx;">{{orderInfo.handsel}}吨</view>
 					</view>
 					<view style="flex: 1;">
 						<view class="con-text">车牌号</view>
 						<view style="margin-top: 10rpx;">{{orderInfo.realName}}</view>
 					</view>
 				</view>
 				<view class="con-text" style="margin-top: 31rpx;">物料类型</view>
 				<view style="margin-top: 10rpx;">{{orderInfo.deliveryName}}</view>
 				<view style="margin-left: -31rpx;margin-right: -31rpx;margin-top: 31rpx;">
 					<u-line color="#ececec"></u-line>
 				</view>
 				<view class="con-flex">
 					<view style="flex: 1;">
 						<view class="con-text">订单编号</view>
 						<view style="margin-top: 10rpx;">{{orderInfo.orderId}}</view>
 					</view>
 					<view style="flex: 1;">
 						<view class="con-text">支付方式</view>
 						<view style="margin-top: 10rpx;" v-if="orderInfo.payType=='W06'">微信</view>
 						<view style="margin-top: 10rpx;" v-else>支付宝</view>
 					</view>
 				</view>
 				<view style="margin-left: -31rpx;margin-right: -31rpx;margin-top: 31rpx;">
 					<u-line color="#ececec"></u-line>
 				</view>
 				<view class="con-flex" v-if="orderInfo.status==1">
 					<view style="flex: 1;">
 						<view class="con-text">预交费用</view>
 						<view style="margin-top: 10rpx;">￥<text style="font-size: 40rpx;">{{orderInfo.payPrice}}</text>
 						</view>
 					</view>
 					<view style="flex: 1;">
 						<view class="con-text">当前计费</view>
 						<view style="margin-top: 10rpx;">￥<text style="font-size: 40rpx;">{{ysyPrice}}</text></view>
 					</view>
 				</view>
 				<view class="con-flex" v-if="orderInfo.status==1">
 					<view style="flex: 1;">
 						<view class="con-text">预选时长</view>
 						<view style="margin-top: 10rpx;">{{orderInfo.totalNum}}分钟</text></view>
 					</view>
 					<view style="flex: 1;">
 						<view class="con-text">已用时长</view>
 						<view style="margin-top: 10rpx;" v-if="ysyTime.hours>0">
 							{{ysyTime.hours>9?ysyTime.hours:'0'+ysyTime.hours}}小时{{ysyTime.minutes>9?ysyTime.minutes:'0'+ysyTime.minutes}}分钟{{ysyTime.seconds>9?ysyTime.seconds:'0'+ysyTime.seconds}}秒</text>
 						</view>
 						<view style="margin-top: 10rpx;" v-else>
 							{{ysyTime.minutes>9?ysyTime.minutes:'0'+ysyTime.minutes}}分钟{{ysyTime.seconds>9?ysyTime.seconds:'0'+ysyTime.seconds}}秒</text>
 						</view>

 					</view>
 				</view>
 				<view class="con-flex" v-if="orderInfo.status==2">
 					<view style="flex: 1;">
 						<view class="con-text">预交费用</view>
 						<view style="margin-top: 10rpx;">￥<text style="font-size: 40rpx;">{{orderInfo.payPrice}}</text>
 						</view>
 					</view>
 					<view style="flex: 1;">
 						<view class="con-text">退费</view>
 						<view style="margin-top: 10rpx;">￥<text
 								style="font-size: 40rpx;">{{orderInfo.refundPrice}}</text></view>
 					</view>
 				</view>
 				<view class="con-flex" v-if="orderInfo.status==2">
 					<view style="flex: 1;">
 						<view class="con-text">预选时长</view>
 						<view style="margin-top: 10rpx;">{{orderInfo.totalNum}}分钟</text></view>
 					</view>
 					<view style="flex: 1;">
 						<view class="con-text">已用时长</view>
 						<view style="margin-top: 10rpx;" v-if="copeteTtme.hours>0">
 							{{copeteTtme.hours>9?copeteTtme.hours:'0'+copeteTtme.hours}}小时{{copeteTtme.minutes>9?copeteTtme.minutes:'0'+copeteTtme.minutes}}分钟{{ysyTime.seconds>9?ysyTime.seconds:'0'+ysyTime.seconds}}秒</text>
 						</view>
 						<view style="margin-top: 10rpx;" v-else>
 							{{copeteTtme.minutes>9?copeteTtme.minutes:'0'+copeteTtme.minutes}}分钟{{copeteTtme.seconds>9?copeteTtme.seconds:'0'+copeteTtme.seconds}}秒</text>
 						</view>

 					</view>
 				</view>
 				<view class="con-flex">
 					<view style="flex: 1;">
 						<view class="con-text">开始时间</view>
 						<view style="margin-top: 10rpx;">{{starTime[1]}}</text></view>
 						<view style="margin-top: 4rpx;">{{starTime[0]}}</text></view>
 					</view>
 					<view style="flex: 1;">
 						<view class="con-text">结束时间</view>
 						<view style="margin-top: 10rpx;">{{endTime[1]}}</text></view>
 						<view style="margin-top: 4rpx;">{{endTime[0]}}</text></view>
 					</view>
 				</view>
 				<!-- <view class="con-flex">
 					<view style="flex: 1;">
 						<view class="con-text">提醒时间</view>
 						<view style="margin-top: 10rpx;">13:35</text></view>
 						<view style="margin-top: 4rpx;">2026-06-20</text></view>
 					</view>
 					<view style="flex: 1;">
 						<view class="con-text">剩余时长</view>
 						<view style="margin-top: 10rpx;">30分钟45秒</text></view>
 					</view>
 				</view> -->
 				<view style="margin-left: -31rpx;margin-right: -31rpx;margin-top: 31rpx;">
 					<u-line color="#ececec"></u-line>
 				</view>
 				<view class="con-text" style="margin-top: 31rpx;">收费标准</view>
 				<view style="margin-top: 10rpx;">计费时长2元/分钟</view>
 			</view>
 			<view class="detail-bom" v-if="orderInfo.status==1">
 				<view style="width: 710rpx;" @click="stopOrder">
 					<u-button type="primary" text="停止使用" customStyle="height: 90rpx;"></u-button>
 				</view>

 			</view>
 		</view>
 		<u-loading-page :loading="loading" loading-text="加载中..."></u-loading-page>
 	</view>

 </template>

 <script>
 	import {
 		changeCartNum,
 		stopApi
 	} from '@/api'
 	export default {
 		data() {
 			return {
 				loading: true,
 				id: '',
 				orderInfo: {},
 				starTime: [],
 				endTime: [],
 				ysyTime: {},
 				ysyPrice: '',
 				timer: null,
 				copeteTtme: {},
 			}
 		},
 		onLoad(option) {
 			this.id = option.id
 			this.getDetail();

 		},
 		onUnload() {
 			console.log(999);
 			if (this.timer) {
 				clearInterval(this.timer)
 			}

 		},
 		methods: {
 			async getDetail() {
 				this.loading = true
 				const id = this.id;
 				if (!id) {
 					uni.showToast({
 						title: "订单不存在",
 						icon: "none",
 						duration: 2000,
 					});
 					return;
 				}
 				const res = await changeCartNum(this.id)
 				this.orderInfo = res.data;
 				if (this.orderInfo.payTime) {
 					this.starTime = this.orderInfo.payTime.split(' ')
 				}
 				console.log(111, this.orderInfo.balancePayTime);
 				if (this.orderInfo.balancePayTime) {
 					this.endTime = this.orderInfo.balancePayTime.split(' ')
 				}
 				if (this.orderInfo.status == 1) {
 					console.log(this.dateDiff(new Date(this.orderInfo.payTime), new Date()));
 					this.ysyTime = this.dateDiff(new Date(this.orderInfo.payTime), new Date())

 					if (this.ysyTime.seconds > 0) {
 						this.ysyPrice = this.ysyTime.minutes * 2 + 2 + this.ysyTime.hours * 60 * 2
 					} else {
 						this.ysyPrice = this.ysyTime.minutes * 2 + this.ysyTime.hours * 60 * 2
 					}

 				}
 				if (this.orderInfo.status == 2) {
 					this.copeteTtme = this.dateDiff(new Date(this.orderInfo.payTime), new Date(this.orderInfo
 						.balancePayTime))
 					console.log(8888, this.copeteTtme);
 				}

 				this.loading = false
 				if (this.orderInfo.status == 1) {
 					this.timer = setInterval(() => {
 						this.getDetailTimer()
 					}, 1000)

 				}
 			},
 			async getDetailTimer() {
 				const res = await changeCartNum(this.id)
 				this.orderInfo = res.data;
 				if (this.orderInfo.payTime) {
 					this.starTime = this.orderInfo.payTime.split(' ')
 				}
 				if (this.orderInfo.balancePayTime) {
 					this.endTime = this.orderInfo.balancePayTime.split(' ')
 				}
 				if (this.orderInfo.status == 1) {
 					this.ysyTime = this.dateDiff(new Date(this.orderInfo.payTime), new Date())

 					if (this.ysyTime.seconds > 0) {
 						this.ysyPrice = this.ysyTime.minutes * 2 + 2 + this.ysyTime.hours * 60 * 2
 					} else {
 						this.ysyPrice = this.ysyTime.minutes * 2 + this.ysyTime.hours * 60 * 2
 					}

 				}

 			},
 			dateDiff(startDate, endDate) {
 				// 确保输入是Date对象
 				if (!(startDate instanceof Date) || !(endDate instanceof Date)) {
 					throw new Error('输入必须是Date对象');
 				}

 				// 确保endDate >= startDate
 				if (endDate < startDate) {
 					const temp = startDate;
 					startDate = endDate;
 					endDate = temp;
 				}

 				// 计算总毫秒差
 				const diffInMs = endDate - startDate;

 				// 计算各个时间单位的差值
 				const diffInSeconds = Math.floor(diffInMs / 1000);
 				const diffInMinutes = Math.floor(diffInSeconds / 60);
 				const diffInHours = Math.floor(diffInMinutes / 60);
 				const diffInDays = Math.floor(diffInHours / 24);

 				// 计算年、月、日（考虑月份和闰年）
 				let years = endDate.getFullYear() - startDate.getFullYear();
 				let months = endDate.getMonth() - startDate.getMonth();
 				let days = endDate.getDate() - startDate.getDate();

 				// 调整负的月或日
 				if (days < 0) {
 					months--;
 					// 获取上个月的天数
 					const lastDayOfMonth = new Date(
 						endDate.getFullYear(),
 						endDate.getMonth(),
 						0
 					).getDate();
 					days += lastDayOfMonth;
 				}

 				if (months < 0) {
 					years--;
 					months += 12;
 				}

 				// 计算剩余的小时、分钟、秒
 				const hours = diffInHours % 24;
 				const minutes = diffInMinutes % 60;
 				const seconds = diffInSeconds % 60;

 				return {
 					years,
 					months,
 					days,
 					hours,
 					minutes,
 					seconds,
 					totalDays: diffInDays,
 					totalHours: diffInHours,
 					totalMinutes: diffInMinutes,
 					totalSeconds: diffInSeconds,
 					milliseconds: diffInMs
 				};
 			},
 			stopOrder() {
 				uni.showModal({
 					title: '提示',
 					content: '确定停止使用？',
 					success: async (but) => {
 						if (but.confirm) {
 							uni.showLoading({
 								title: '停止中...',
 								mask: true
 							})
 							const res = await stopApi({
 								id: this.id
 							})
 							uni.hideLoading()
 							uni.showToast({
 								title: '已停止',
 								icon: 'success'
 							})
 							setTimeout(() => {
 								this.getDetail();
 							}, 1500)
 						}

 					}
 				})

 			},
 		}
 	}
 </script>

 <style lang="scss" scoped>
 	.detail {
 		padding-bottom: calc(env(safe-area-inset-bottom) / 2 + 180rpx);
 	}

 	.detail-top {
 		width: 750rpx;
 		height: 490rpx;
 		background: #17488a;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		padding-top: 62rpx;
 	}

 	.top-text {
 		font-size: 35rpx;
 		font-weight: 600;
 		color: #fff;
 		margin-top: 26rpx;
 	}

 	.cicle {
 		width: 210rpx;
 		height: 210rpx;
 		display: flex;
 		align-items: center;

 		justify-content: center;
 		background: #00bbfe;
 		border-radius: 50%;
 	}

 	.cicle-item {
 		width: 190rpx;
 		height: 190rpx;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
 		background: #fff;
 		border-radius: 50%;
 		color: #333;
 		font-size: 31rpx;
 	}

 	.item-time {
 		font-weight: 600;
 		color: #000;
 		font-size: 35rpx;
 		margin-top: 8rpx;
 	}

 	.detail-con {
 		width: 710rpx;
 		padding: 31rpx;
 		border-radius: 29rpx;
 		font-size: 31rpx;
 		font-weight: 600;
 		color: #000;
 		position: relative;
 		margin: 0 auto;
 		margin-top: -110rpx;
 		background: #fff;
 	}

 	.con-text {
 		font-weight: 400;
 		font-size: 27rpx;
 		color: #999;
 	}

 	.con-flex {
 		display: flex;
 		margin-top: 31rpx;
 	}
 </style>